---
title: Visual treatment
redirect_from:
  - /content/social-media/visual-treatment/
---

import { Grid } from "@kiwicom/orbit-components";

import ImageInGrid from "./ImageInGrid";

> As the old Czech proverb goes: "Don't just say it, show it!"

The right imagery makes our content much more powerful and engaging.
It also helps us to differentiate from our competitors.

Our photography should always have a sense of optimism.
The subjects and environments should feel authentic.
We shouldn't be afraid of showing **real faces and emotions.**
People should be **unposed** and their **composition** within the environment **natural**.
Lighting, color, and tone should be **unfiltered and realistic \#NoFilter!**

Each image should establish an emotional connection with our audience,
showing them the world Kiwi.com can offer.

<!-- eslint-disable -->

## Our destinations...

<!-- eslint-enable -->

**are** real, authentic, and full of wanderlust.
Images don't just show the place but the _details_ of the people and the story.

<Grid columns="200px 200px 296px;" rows="minmax(100px, auto) minmax(100px, auto);" gap="10px;">

<ImageInGrid column="1 / 3" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-island.png)

</ImageInGrid>

<ImageInGrid column="3 / 3" row="1 / 3">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-hiker.png)

</ImageInGrid>

<ImageInGrid column="1" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-shoes.png)

</ImageInGrid>

<ImageInGrid column="2" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-clotheslines.png)

</ImageInGrid>

</Grid>

**aren't** unrealistic, over edited, broad stock landscapes that lack emotion.

<Grid columns="360px 360px;" gap="10px;" rows="minmax(100px, auto) minmax(100px, auto);">

<ImageInGrid column="1 / 3" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-sunset.png)

</ImageInGrid>

<ImageInGrid column="1" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-green.png)

</ImageInGrid>

<ImageInGrid column="2" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/destination-glare.png)

</ImageInGrid>

</Grid>

<!-- eslint-disable -->

## Our people...

<!-- eslint-enable -->

**are** diverse and show real authentic moments.
They're natural, capturing the emotions and adventurous spirit of our audience.

<Grid columns="360px 360px;" gap="10px;" rows="minmax(100px, auto) minmax(100px, auto);">

<ImageInGrid column="1 / 3" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/people-boat.png)

</ImageInGrid>

<ImageInGrid column="1" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/people-sunglasses.png)

</ImageInGrid>

<ImageInGrid column="2" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/people-smile.png)

</ImageInGrid>

</Grid>

**aren't** posed, facing away from the camera or recreating unrealistic and cliched moments.

<Grid columns="420px 276px;" gap="10px;" rows="minmax(100px, auto) minmax(100px, auto);">

<ImageInGrid column="1" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/people-hat.png)

</ImageInGrid>

<ImageInGrid column="2" row="1 / 3">

![GATSBY_EMPTY_ALT](../../../../images/social-media/people-forest.png)

</ImageInGrid>

<ImageInGrid column="1" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/people-cliff.png)

</ImageInGrid>

</Grid>

<!-- eslint-disable -->

## Our travel...

<!-- eslint-enable -->

**is** bright and cheerful.
It's packing and getting ready.
The journey isn't a boring transition, it's all part of the adventure.

<Grid columns="260px 300px;" gap="10px;" rows="170px 10px 200px;">

<ImageInGrid column="1" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-plane.png)

</ImageInGrid>

<ImageInGrid column="2" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-packing.png)

</ImageInGrid>

<ImageInGrid column="1" row="3">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-rest.png)

</ImageInGrid>

<ImageInGrid column="2" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-beach-cab.png)

</ImageInGrid>

</Grid>

**isn't** dull and boring, it's not posed cliched moments
or suggestive or monotony/complexity/delays.

<Grid columns="430px 290px;" gap="10px;" rows=" minmax(100px, auto);">

<ImageInGrid column="1 / 3" row="1">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-plane-rows.png)

</ImageInGrid>

<ImageInGrid column="1" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-map.png)

</ImageInGrid>

<ImageInGrid column="2" row="2">

![GATSBY_EMPTY_ALT](../../../../images/social-media/travel-too-much-baggage.png)

</ImageInGrid>

</Grid>

<!-- eslint-disable -->

## Our moving images...

<!-- eslint-enable -->

**are** authentic and help create awe in the world around you to tell a more engaging story.

<Grid columns="210px 210px;" gap="10px;" rows=" minmax(100px, auto);">

<div style={{gridColumn: "1 / 3", gridRow: "1", width: "426.43px", height: "137.74px", overflow: "hidden", display: "inline-block"}}>

![GATSBY_EMPTY_ALT](../../../../images/social-media/movie-food-cart.gif)

</div>

<div style={{gridColumn: "1", gridRow: "2", width: "208.79px", height: "146.46px", overflow: "hidden", display: "inline-block"}}>

<div style={{width: "314.77px", height: "177.05px"}}>

![GATSBY_EMPTY_ALT](../../../../images/social-media/movie-stairs.gif)

</div>

</div>

<div style={{gridColumn: "2", gridRow: "2", width: "205.01px", height: "146.46px", overflow: "hidden", display: "inline-block"}}>

<div style={{width: "314.77px", height: "177.05px"}} >

![GATSBY_EMPTY_ALT](../../../../images/social-media/movie-big-ben.gif)

</div>

</div>

</Grid>

**aren't** stylized, tongue-in-cheek or over-produced,
or trying to represent unreal situations.

<Grid columns="202px 202px;" gap="10px;" rows=" minmax(100px, auto);">

<div style={{gridColumn: "1", gridRow: "1", width: "201.13px", height: "146.46px", overflow: "hidden", display: "inline-block", border: "2px solid #ea1347"}}>

<div style={{width: "228.39px", height: "152.27px"}}>

![GATSBY_EMPTY_ALT](../../../../images/social-media/movie-photo.gif)

</div>

</div>

<div style={{gridColumn: "2", gridRow: "1 / 3", width: "171.37px", height: "304.66px", overflow: "hidden", display: "inline-block", border: "2px solid #ea1347"}}>

<div style={{width: "171.37px", height: "304.66px"}}>

![GATSBY_EMPTY_ALT](../../../../images/social-media/movie-sun-ocean.gif)

</div>

</div>

<div
  style={{
    border: "2px solid #ea1347",
    backgroundImage: "url(/social-media/movie-sunglasses.gif)",
    backgroundSize: "415px",
    width: "201.13px",
    height: "146.46px",
    backgroundPosition: "top -36px left -213.73px",
  }}
/>

</Grid>
